<template>
  <div class="search">
    <NavBar>
      <div class="el-icon-arrow-left" slot="left" @click="onClickLeft"></div>
      <div class="center" slot="center">搜索</div>
    </NavBar>
    <div class="search-input">
      <!-- <van-icon name="cross" class="dele" @click="showHistory" /> -->

      <van-search
        v-model="keyword"
        show-action
        placeholder="输入餐厅、食品"
        @key="onSearch"
        @search="onSearch"
        @clear="showHistory"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div v-if="history">
      <div
        class="merchant"
        v-for="(item, index) in restaurant"
        :key="'res' + index"
      >
        <div class="cinema">
          <img :src="imgurl + shopImgUrl" alt="" />
          <div class="line">
            <p class="name">{{ item.name }}</p>
            <p class="price">月售{{ item.recent_order_num }}单</p>
            <p class="Magnitude">
              {{ item.float_minimum_order_amount }}元起售/距离{{
                item.distance
              }}公里
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="result" v-else>
      <p>很抱歉！暂无搜索结果</p>
    </div>
    <div class="search-history">
      <header>搜索历史</header>
      <div
        @click="itemClick(item)"
        class="item"
        v-for="(item, index) in searchHistory"
        :key="index"
      >
        {{ item }}
      </div>
      <div class="clear" @click="clearHistory">清空历史记录</div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import { SearchShopList } from "../../api/reques";
export default {
  data() {
    return {
      shopInfo: 1,
      cityInfo: {}, // 所选城市信息
      keyword: "", // 搜索关键字
      restaurant: [], // 搜索到的餐馆
      history: false,
      imgurl: "",
      shopImgUrl: "//elm.cangdu.org/img/",
    };
  },
  computed: {
    searchHistory() {
      return JSON.parse(window.localStorage.getItem("searchHistory"));
    },
    show() {
      return window.localStorage.getItem("searchHistory");
    },
  },

  components: { NavBar },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      // 获取商铺列表
      SearchShopList(this.keyword)
        .then((res) => {
          //将请求回来的东西赋给data中的数据
          console.log(res);
          this.restaurant = res.data;
          this.imgurl = res.data.image_path;
          console.log(this.restaurant);
          if (!window.localStorage.getItem("searchHistory")) {
            window.localStorage.setItem(
              "searchHistory",
              JSON.stringify([this.keyword])
            );
          } else {
            let arr = JSON.parse(window.localStorage.getItem("searchHistory"));
            let newArr = arr.push(this.keyword);
            newArr = arr;
            for (var i = 0; i < newArr.length; i++) {
              if (newArr[i] !== this.keyword) {
                window.localStorage.setItem(
                  "searchHistory",
                  JSON.stringify(newArr)
                );
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    itemClick(item) {
      this.onSearch(this.$route.params.geohash, item);
      console.log(item);
      this.keyword = item;
    },

    showHistory() {
      this.history = true;
    },
    clearHistory() {
      window.localStorage.clear();
      window.location.reload();
    },
  },
};
</script>

<style lang="scss" scoped>
.search-input {
  padding: 5px 15px 5px 41px;
  margin-top: 45px;
  display: flex;
  position: relative;

  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  .el-input {
    width: 70%;
  }
  .el-button {
    margin-left: 20px;
  }
  .dele {
    position: absolute;
    left: 246px;
    top: 23px;
    font-size: 15px;
  }
}
.merchant {
  width: 100%;
  height: 137px;
  background-color: #fafafa;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(211, 211, 211);
  .cinema {
    display: flex;
    justify-content: space-between;
    position: relative;
    img {
      width: 90px;
      height: 90px;
    }
    .line {
      position: absolute;
      left: 111px;
      p {
        font-size: 12px;
      }
    }
  }
}

.result {
  width: 100%;
  height: 26px;
  p {
    text-align: center;
  }
}
.search-history {
  background-color: #fff;
  padding: 10px 0;
  header {
    font-size: 14px;
    padding: 5px 0 13px 5px;
    text-align: center;
    font-weight: 700;
    color: #666;
  }
  .item {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0 10px 5px;
  }
  .clear {
    height: 30px;
    line-height: 50px;
    text-align: center;
    color: #3190e8;
    font: 20px;
    font-weight: 700;
  }
}
</style>